<template>
  <div id="homeChartBar">
    <div id="homeChartTitle">
      营&nbsp;养&nbsp;助&nbsp;手
    </div>
    <div id="chartInputContent">
      <p>请输入您的一日三餐:</p>
      <table cellspacing="0" cellpadding="0" border="0">
        <td width="30%">
          <el-input v-model="morningInput" placeholder="请输入您的早餐"></el-input>
        </td>
        <td width="30%">
          <el-input v-model="lunchInput" placeholder="请输入您的午餐"></el-input>
        </td>
        <td width="30%">
          <el-input v-model="eveningInput" placeholder="请输入您的晚餐"></el-input>
        </td>
        <td>
          <el-button icon="el-icon-search" @click="searchMeals" type="success" plain>查询</el-button>
        </td>
      </table>
    </div>
    <div id="chartContent">

    </div>
  </div>
</template>

<script>

  import {breakfastSearch} from "@/network/home/breakfastSearch";
  import {lunchSearch} from "@/network/home/lunchSearch";
  import {dinnerSearch} from "@/network/home/dinnerSearch";

  export default {
    name: "HomeChartBar",
    data() {
      return {
        morningInput: '',
        lunchInput: '',
        eveningInput: '',
        breakfastData: {
          Ca: 57,
          Zn: 1.82,
          K: 278,
          Na: 131.0,
          Fe: 2.8,
        },
        lunchData: {
          Ca: 37,
          Zn: 2.82,
          K: 300,
          Na: 131.0,
          Fe: 3.8,
        },
        dinnerData: {
          Ca: 47,
          Zn: 3.8,
          K: 250,
          Na: 150.0,
          Fe: 1.8,
        },
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      searchMeals() {
        // eslint-disable-next-line no-console
        console.log(this.morningInput, this.lunchInput, this.eveningInput);
        let q1 = "矿物质";
        let breakfastQuestion = this.morningInput + q1;
        let lunchQuestion = this.lunchInput + q1;
        let dinnerQuestion = this.eveningInput + q1;
        if (this.morningInput !== '' && this.lunchInput !== '' && this.eveningInput !== '') {
          Promise.all([
            breakfastSearch(breakfastQuestion).then(res => {
              if (res.code === '1') {
                let breakfastAnswer = res.answer;
                // eslint-disable-next-line no-console
                // console.log(breakfastAnswer);
                let breakfastCa = this.CaSearch(breakfastAnswer);
                let breakfastZn = this.ZnSearch(breakfastAnswer);
                let breakfastK = this.KSearch(breakfastAnswer);
                let breakfastNa = this.NaSearch(breakfastAnswer);
                let breakfastFe = this.FeSearch(breakfastAnswer);
                this.breakfastData.Ca = parseFloat(breakfastCa);
                this.breakfastData.Zn = parseFloat(breakfastZn).toFixed(2);
                this.breakfastData.K = parseFloat(breakfastK);
                this.breakfastData.Na = parseFloat(breakfastNa);
                this.breakfastData.Fe = parseFloat(breakfastFe).toFixed(2);
                // this.drawLine();
              }
            }).catch(err => {
              // eslint-disable-next-line no-console
              console.log(err);
            }),
            lunchSearch(lunchQuestion).then(res => {
            if (res.code === '1') {
              let lunchAnswer = res.answer;
              // eslint-disable-next-line no-console
              // console.log(lunchAnswer);
              let lunchCa = this.CaSearch(lunchAnswer);
              let lunchZn = this.ZnSearch(lunchAnswer);
              let lunchK = this.KSearch(lunchAnswer);
              let lunchNa = this.NaSearch(lunchAnswer);
              let lunchFe = this.FeSearch(lunchAnswer);
              this.lunchData.Ca = parseFloat(lunchCa);
              this.lunchData.Zn = parseFloat(lunchZn).toFixed(2);
              this.lunchData.K = parseFloat(lunchK);
              this.lunchData.Na = parseFloat(lunchNa);
              this.lunchData.Fe = parseFloat(lunchFe).toFixed(2);
            }
          }).catch(err => {
            // eslint-disable-next-line no-console
            console.log(err);
          }),
            dinnerSearch(dinnerQuestion).then(res => {
              if (res.code === '1') {
                let dinnerAnswer = res.answer;
                // eslint-disable-next-line no-console
                // console.log(lunchAnswer);
                let dinnerCa = this.CaSearch(dinnerAnswer);
                let dinnerZn = this.ZnSearch(dinnerAnswer);
                let dinnerK = this.KSearch(dinnerAnswer);
                let dinnerNa = this.NaSearch(dinnerAnswer);
                let dinnerFe = this.FeSearch(dinnerAnswer);
                this.dinnerData.Ca = parseFloat(dinnerCa);
                this.dinnerData.Zn = parseFloat(dinnerZn).toFixed(2);
                this.dinnerData.K = parseFloat(dinnerK);
                this.dinnerData.Na = parseFloat(dinnerNa);
                this.dinnerData.Fe = parseFloat(dinnerFe).toFixed(2);
              }
            }).catch(err => {
              // eslint-disable-next-line no-console
              console.log(err);
            }),
            // eslint-disable-next-line no-unused-vars
          ]).then(ans => {
            this.drawLine();
          });
        } else {
          alert("输入错误");
        }
      },
      CaSearch(mealsAnswer) {
        let gai = '';
        let CaNum1, CaNum2;
        for (let i = 0; i < mealsAnswer.length; i++) {
          if (mealsAnswer[i] === '钙') {
            CaNum1 = i+6;
            // eslint-disable-next-line no-console
            // console.log(CaNum1, mealsAnswer[CaNum1]);
            break;
          }
        }
        if(mealsAnswer[CaNum1] === '-' || mealsAnswer[CaNum1] === 'T' || mealsAnswer[CaNum1] === 'u') {
          gai = 0;
        } else {
          for (let j = CaNum1+1; j < CaNum1+10; j++) {
            if (mealsAnswer[j] === 'm' && mealsAnswer[j+1] === 'g') {
              CaNum2 = j-1;
              break;
            }
          }
          // eslint-disable-next-line no-console
          // console.log(CaNum2);
          for (let k = CaNum1; k <= CaNum2; k++) {
            gai += mealsAnswer[k];
          }
        }
        return gai;
      },
      ZnSearch(mealsAnswer) {
        let xin = '';
        let ZnNum1, ZnNum2;
        for (let i = 0; i < mealsAnswer.length; i++) {
          if (mealsAnswer[i] === '锌') {
            ZnNum1 = i+6;
            // eslint-disable-next-line no-console
            // console.log(ZnNum1, mealsAnswer[ZnNum1]);
            break;
          }
        }
        if(mealsAnswer[ZnNum1] === '-' || mealsAnswer[ZnNum1] === 'T' || mealsAnswer[ZnNum1] === 'u') {
          xin = 0;
        } else {
          for (let j = ZnNum1+1; j < ZnNum1+10; j++) {
            if (mealsAnswer[j] === 'm' && mealsAnswer[j+1] === 'g') {
              ZnNum2 = j-1;
              break;
            }
          }
          // eslint-disable-next-line no-console
          // console.log(ZnNum2);
          for (let k = ZnNum1; k <= ZnNum2; k++) {
            xin += mealsAnswer[k];
          }
        }
        return xin;
      },
      KSearch(mealsAnswer) {
        let jia = '';
        let KNum1, KNum2;
        for (let i = 0; i < mealsAnswer.length; i++) {
          if (mealsAnswer[i] === '钾') {
            KNum1 = i+5;
            // eslint-disable-next-line no-console
            // console.log(KNum1, mealsAnswer[KNum1]);
            break;
          }
        }
        if(mealsAnswer[KNum1] === '-' || mealsAnswer[KNum1] === 'T' || mealsAnswer[KNum1] === 'u') {
          jia = 0;
        } else {
          for (let j = KNum1+1; j < KNum1+10; j++) {
            if (mealsAnswer[j] === 'm' && mealsAnswer[j+1] === 'g') {
              KNum2 = j-1;
              break;
            }
          }
          // eslint-disable-next-line no-console
          // console.log(KNum2);
          for (let k = KNum1; k <= KNum2; k++) {
            jia += mealsAnswer[k];
          }
        }
        return jia;
      },
      NaSearch(mealsAnswer) {
        let na = '';
        let NaNum1, NaNum2;
        for (let i = 0; i < mealsAnswer.length; i++) {
          if (mealsAnswer[i] === '钠') {
            NaNum1 = i+6;
            // eslint-disable-next-line no-console
            // console.log(NaNum1, mealsAnswer[NaNum1]);
            break;
          }
        }
        if(mealsAnswer[NaNum1] === '-' || mealsAnswer[NaNum1] === 'T' || mealsAnswer[NaNum1] === 'u') {
          na = 0;
        } else {
          for (let j = NaNum1+1; j < NaNum1+10; j++) {
            if (mealsAnswer[j] === 'm' && mealsAnswer[j+1] === 'g') {
              NaNum2 = j-1;
              break;
            }
          }
          // eslint-disable-next-line no-console
          // console.log(NaNum2);
          for (let k = NaNum1; k <= NaNum2; k++) {
            na += mealsAnswer[k];
          }
        }
        return na;
      },
      FeSearch(mealsAnswer) {
        let tie = '';
        let FeNum1, FeNum2;
        for (let i = 0; i < mealsAnswer.length; i++) {
          if (mealsAnswer[i] === '铁') {
            FeNum1 = i+6;
            // eslint-disable-next-line no-console
            // console.log(FeNum1, mealsAnswer[FeNum1]);
            break;
          }
        }
        if(mealsAnswer[FeNum1] === '-' || mealsAnswer[FeNum1] === 'T' || mealsAnswer[FeNum1] === 'u') {
          tie = 0;
        } else {
          for (let j = FeNum1+1; j < FeNum1+10; j++) {
            if (mealsAnswer[j] === 'm' && mealsAnswer[j+1] === 'g') {
              FeNum2 = j-1;
              break;
            }
          }
          // eslint-disable-next-line no-console
          // console.log(FeNum2);
          for (let k = FeNum1; k <= FeNum2; k++) {
            tie += mealsAnswer[k];
          }
        }
        return tie;
      },
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('chartContent'));
        let posList = [
          'left', 'right', 'top', 'bottom',
          'inside',
          'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
          'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];
        let app = {};
        app.configParameters = {
          rotate: {
            min: -90,
            max: 90
          },
          align: {
            options: {
              left: 'left',
              center: 'center',
              right: 'right'
            }
          },
          verticalAlign: {
            options: {
              top: 'top',
              middle: 'middle',
              bottom: 'bottom'
            }
          },
          position: {
            options: posList.reduce(function (map, pos) {
              map[pos] = pos;
              return map;
            }, {})
          },
          distance: {
            min: 0,
            max: 100
          }
        };

        app.config = {
          rotate: 90,
          align: 'left',
          verticalAlign: 'middle',
          position: 'insideBottom',
          distance: 15,
          onChange: function () {
            var labelOption = {
              normal: {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
              }
            };
            myChart.setOption({
              series: [{
                label: labelOption
              }, {
                label: labelOption
              }, {
                label: labelOption
              }, {
                label: labelOption
              }]
            });
          }
        };

        var labelOption = {
          show: true,
          position: app.config.position,
          distance: app.config.distance,
          align: app.config.align,
          verticalAlign: app.config.verticalAlign,
          rotate: app.config.rotate,
          formatter: '{c}  {name|{a}}',
          fontSize: 16,
          rich: {
            name: {
            }
          }
        };
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['Breakfast', 'Lunch', 'Dinner', 'All']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['钙(Ca)*10', '锌(Zn)*100', '钾(K)', '钠(Na)', '铁(Fe)*100']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Breakfast',
              type: 'bar',
              barGap: 0,
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [parseFloat(this.breakfastData.Ca*10).toFixed(2), parseFloat(this.breakfastData.Zn*100).toFixed(2), this.breakfastData.K, this.breakfastData.Na, parseFloat(this.breakfastData.Fe*100).toFixed(2)]
            },
            {
              name: 'Lunch',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [parseFloat(this.lunchData.Ca*10).toFixed(2), parseFloat(this.lunchData.Zn*100).toFixed(2), this.lunchData.K, this.lunchData.Na, parseFloat(this.lunchData.Fe*100).toFixed(2)]
            },
            {
              name: 'Dinner',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [parseFloat(this.dinnerData.Ca*10).toFixed(2), parseFloat(this.dinnerData.Zn*100).toFixed(2), this.dinnerData.K, this.dinnerData.Na, parseFloat(this.dinnerData.Fe*100).toFixed(2)]
            },
            {
              name: 'All',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [this.breakfastData.Ca*10+this.dinnerData.Ca*10+this.dinnerData.Ca*10, this.breakfastData.Zn*100+this.dinnerData.Zn*100+this.lunchData.Zn*100, parseFloat(this.breakfastData.K+this.dinnerData.K+this.lunchData.K).toFixed(2), parseFloat(this.breakfastData.Na+this.dinnerData.Na+this.lunchData.Na).toFixed(2), this.breakfastData.Fe*100+this.dinnerData.Fe*100+this.lunchData.Fe*100]
            }
          ]
        });
      },
    },
  }
</script>

<style scoped>
  #homeChartBar {
    position: absolute;
    top: 220%;
    width: 100%;
    height: 100%;
    /*border: 1px solid;*/
    background-color: #fff;
  }
  #homeChartTitle {
    position: absolute;
    top: 2%;
    left: 46%;
    width: 150px;
    height: 40px;
    font-size: 30px;
    border-bottom: 1px solid #67C23A;
    font-weight: bold;
  }
  #chartInputContent {
    position: absolute;
    top: 10%;
    width: 80%;
    height: 20%;
    left: 10%;
    /*border: 1px solid;*/
    box-shadow: -12px 12px 12px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  #chartInputContent p {
    position: absolute;
    font-size: 18px;
    top: 10%;
    left: 2%;
    font-weight: bold;
  }
  #chartInputContent table {
    position: absolute;
    width: 80%;
    left: 10%;
    height: 50%;
    bottom: 5%;
  }
  #chartInputContent table .el-input {
    position: relative;
    width: 90%;
    border: 1px solid #67C23A;
    border-radius: 5px;
  }
  #chartContent {
    position: absolute;
    top: 35%;
    width: 80%;
    height: 60%;
    left: 10%;
    /*border: 1px solid;*/
    box-shadow: -12px 12px 12px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
</style>